<template>
    <div class="home">
        <div class="body">
            <div class="title">点料</div>
            <el-row :gutter="24">
                <el-col :span="5">
                    <div class="table-w">
                        <div class="subtitle">库位选择</div>
                        <el-tree
                            :data="treedata"
                            default-expand-all
                            :expand-on-click-node="false"
                            node-key="id"
                            ref="tree"
                            highlight-current
                            :props="defaultProps"
                            style="height:95%;overflow:auto"
                            @node-click="selTreeNode"
                            >
                        </el-tree>
                    </div>
                </el-col>
                <el-col :span="19">
                    <div class="table-w">
                        <div class="subtitle">库位信息</div>
                        <!-- <el-table
                            :data="shelfLocation"
                            :row-style="tableRowStyle"
                            :header-cell-style="tableHeaderColor"
                            highlight-current-row
                            style="width: 100%"
                            height="12rem"
                            row-key="FlnkID"
                        >
                            <el-table-column label="序号" width="80" align="center">
                            <template slot-scope="scope">{{scope.$index + 1}}</template>
                            </el-table-column>
                            <el-table-column prop="NodeID" label="库位编号" align="center"></el-table-column>
                            <el-table-column prop="NodeID" label="库位名称" width="250" align="left"></el-table-column>
                            <el-table-column prop="ParentWarehouseName" label="所属楼层" width="250" align="left"></el-table-column>
                            <el-table-column prop="StoreLevelName" label="存储级别" width="250" align="left"></el-table-column>
                            <el-table-column prop="MaterielTypeName" label="存储物料类型" width="300" align="left"></el-table-column>
                        </el-table> -->
                        <div style="text-align:left" v-if="kWLocation.length>0">
                            <input type="checkbox" v-model="isAllCheck" onchange="changeAll()" style="width:35px;height:35px;float:left"/>
                            <div style="float:left; font-size:0.4rem;margin-left:5px;line-height:40px;">全选</div>
                            <div style="float:right">
                                <el-button
                                    type="primary"
                                    class="button orgbtn"
                                    @click="printKW"
                                    >打印库位</el-button>
                            </div>
                        </div>
                        <table class="tbDom" border="1" cellspacing="1" v-html="tableDom">
                            <tbody></tbody>
                        </table>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import Mixin from '@/components/mixin' // 混入
import {GetShelfLocationTree} from '@/api/tool'
import {getArbitrage} from '@/api/materiel'
export default {
  name: 'storage',
  data () {
    return {
      treedata: [],
      defaultProps: {
        children: 'children',
        label: 'text'
      },
      selTreeID: '',
      shelfLocation: [],
      tableDom: '',
      isAllCheck: false,
      kWLocation: [],
      maxLineID: 0,
      maxColumnID: 0
    }
  },
  mixins: [Mixin],
  methods: {
      // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    getLocationTree () {
      let vm = this
      let params = new FormData()
      params.append('IsShelfNode', '0')
      GetShelfLocationTree(params).then((response) => {
        // 处理树形数据
        var endData = vm.getTreeFormatJson(response.data)
        vm.treedata = endData
        if (vm.treedata.length > 0) {
          vm.selTreeID = vm.treedata[0].id
          vm.getShelfLocationByID()
          vm.$nextTick(function () {
            vm.$refs.tree.setCurrentKey(vm.selTreeID)
          })
        }
      })
    },
    getShelfLocationByID () {
      let vm = this
    //   let params = new FormData()
    //   params.append('NodeCode', '')
    //   params.append('NodeName', '')
    //   params.append('StoreLevel', '0')
    //   params.append('MaterielTypeCode', '0')
    //   params.append('ParentID', vm.selTreeID)
    //   params.append('IsShelfNode', '1')
    //   GetShelfLocationTB(params).then((response) => {
    //     vm.shelfLocation = response.data
    //   })
      let params = new FormData()
      params.append('ShelfFlnkID', vm.selTreeID)
      getArbitrage(params).then((response) => {
        if (response.data) {
          vm.isAllCheck = false
          vm.getGoodKWLocation(response.data)
        }
      })
    },
    // 渲染table dom
    getGoodKWLocation (data) {
      let vm = this
      // 根据货架标识读取库位列表
      vm.tableDom = ''
      var htmlTr = ''
      if (data != null) {
        var dataList = data.GoodKWLocation
        vm.kWLocation = dataList
        vm.maxLineID = data.MaxLineID
        vm.maxColumnID = data.MaxColumnID
        data.GoodKWLocation.forEach(element => {
          element.IsChecked = false
        })
        for (let i = 1; i <= data.MaxLineID + 1; i++) {
          let _temp =
            data.MaxLineID - i + 1 === 0
              ? ''
              : data.MaxLineID - i + 1 + '层'
          if (_temp === '') { htmlTr += '<tr class="one"><td>' + _temp + '</td>' } else { htmlTr += '<tr><td>' + _temp + '</td>' }
          for (let j = 1; j <= data.MaxColumnID; j++) {
            if (data.MaxLineID === i - 1) {
              htmlTr += '<td>' + j + '</td>'
            }
            var tdItemList = dataList.filter((_item) => {
              return _item.LineID === i && _item.ColumnID === j
            })

            if (tdItemList != null && tdItemList.length > 0) {
              htmlTr +=
                '<td StockPlaceID="' +
                tdItemList[0].StockPlaceID +
                '"ShelfFlnkID="' +
                tdItemList[0].ShelfFlnkID +
                '" class="tdBody" style="position: relative;' +
                (tdItemList[0].RowSpan > 1 || tdItemList[0].ColSpan > 1
                  ? 'background-color:#00438a;'
                  : '') +
                '" isselected="0" floorid="' +
                tdItemList[0].FloorID +
                '" colid="' +
                tdItemList[0].ColID +
                '" lineid="' +
                tdItemList[0].LineID +
                '" columnid="' +
                tdItemList[0].ColumnID +
                '" rowspan="' +
                tdItemList[0].RowSpan +
                '" colspan="' +
                tdItemList[0].ColSpan +
                '"ondragover="allowDrop(event)"' +
                'ondrop="selectTd(this);"><div><input v-model="' + tdItemList[0].IsChecked + '" onchange=changemy("' + tdItemList[0].StockPlaceID + '") type="checkbox" class="chk"/></div><div class="textc">' +
                tdItemList[0].FloorID +
                '-' +
                tdItemList[0].ColID +
                '</div></td>'
            }
          }
          htmlTr += '</tr>'
        }
      }
      vm.tableDom = htmlTr
    },
    selTreeNode () {
      let vm = this
      vm.selTreeID = vm.$refs.tree.getCurrentKey()
      vm.getShelfLocationByID()
    },
    changeAll () {
      let vm = this
      vm.isAllCheck = !vm.isAllCheck
      // 全选
      vm.kWLocation.forEach(element => {
        element.IsChecked = vm.isAllCheck
      })
      vm.$('.tbDom input[type=checkbox]').prop('checked', vm.isAllCheck)
    },
    changemy (spid) {
      let vm = this
      vm.kWLocation.forEach(element => {
        if (element.StockPlaceID === spid) {
          element.IsChecked = !element.IsChecked
        }
      })
    },
    printKW () {
      let vm = this
      let kuArray = []
      for (let j = 1; j <= vm.maxColumnID; j++) {
        for (let i = 1; i <= vm.maxLineID + 1; i++) {
          var tdItemList = vm.kWLocation.filter((_item) => {
            return _item.LineID === i && _item.ColumnID === j && _item.IsChecked
          })
          if (tdItemList !== null && tdItemList.length > 0) {
            kuArray.push({
              'StockPlaceCode': tdItemList[0].StockPlaceCode
            })
          }
        }
      }
      if (kuArray.length <= 0) {
        alert('请选择库位')
      } else {
        if (vm.isAndroid()) {
          window.android.print('KW', JSON.stringify(kuArray))
        } else {
          vm.$message(JSON.stringify(kuArray))
        }
      }
    }
  },
  mounted () {
    let vm = this
    vm.getLocationTree()
    window.changeAll = vm.changeAll
    window.changemy = vm.changemy
  }
}
</script>
<style lang="scss" scoped>
@import "~@/css/tool/storage.scss";
</style>
<style lang="scss">
    .el-tree-node{
        //margin-top: 10px;
    }
    .el-tree-node__label{
        font-size: 30px;
    }
    .el-tree-node__content {
        height: 35px;
        line-height: 35px;
        padding: 5px;
        margin-right: 10px;
    }
    .el-tree-node__content:hover {
        color: #3274e6;
        background: none;
    }
    .el-tree-node:focus > .el-tree-node__content{
        //color: #ff6600;
        background: none;
    }
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
        //color: #ff6600;
        //background: none;
        background: rgba(0,153,255,0.4);
    }
    .el-table::before {
        height: 0px;
    }
    .chk{
        width: 35px;
        height: 35px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .textc{
        display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;display: -webkit-flex;align-items: center;-webkit-align-items: center;
    }
    .tbDom{
        tr.one{
            height: 60px;
        }
    }
    // .el-checkbox__inner{
    //     width: 35px;
    //     height: 35px;
    // }
    // .el-checkbox__input.is-checked .el-checkbox__inner::after{
    //     width: 15px;
    //     height: 15px;        
    // }
    
</style>